<template>
  <base-layout :visibleContent="true">
    <template #searchPanel>
      <el-row>
        <el-col
          :span="24"
          class="seachpanle"
        >
          <div class="title lineHeight">套餐列表</div>
          <div class="serach">
            <el-select
              clearable
              style="width: 200px"
              v-model="form.carPackageDistId"
              placeholder="套餐所属类别"
            >
              <el-option
                v-for="item in dict['套餐所属类别']"
                :key="item.index"
                :value="item.value"
                :label="item.text"
              />
            </el-select>
            <el-input
              clearable
              style="width: 200px"
              v-model="form.carPackageName"
              placeholder="套餐名称"
            />
            <el-button
              icon="el-icon-search"
              type="primary"
              @click="_carPackageList"
            >搜索</el-button>
          </div>
        </el-col>

        <el-col class="show-content-panle">
          <ul>
            <li
              v-for="(item,index) in packList"
              :key="index"
              :class="{'activeColor':item.isActive}"
              @click="packCheck(item.id)"
            >
              <div class="title"><span>{{item.carPackageName}}</span>
                <svg-icon
                  v-if="item.isActive"
                  icon-class="yes"
                />
              </div>
              <div class="mont">￥{{item.carPackageAmount}}</div>
            </li>
          </ul>
        </el-col>
      </el-row>
    </template>
    <template #contentPanel>
      <el-row v-if="status!='setting'">
        <el-col :span="22">项目列表</el-col>
      </el-row>
      <el-divider
        v-if="status!='setting'"
        content-position="center"
      ></el-divider>
      <el-row v-if="status!='setting'">
        <data-table
          :value="tableData"
          :total-count="tableData.length"
          :has-action="true"
          :table-column-attributes="tableColumnAttributes"
          :width="160"
          :localPage="true"
        >
          <template #action="{ row,column,$index }">
            <i
              class="el-icon-delete"
              title="删除"
              style="color: red; margin-left: 20px; cursor: pointer"
              @click="deleteById(row,$index)"
            ></i>
          </template>
        </data-table>
      </el-row>
      <el-row>
        <el-col
          :span="24"
          align="right"
          justify="center"
        >
          <el-button
            type="success"
            @click="select"
          >套餐选择</el-button>
        </el-col>
      </el-row>
    </template>
  </base-layout>
</template>

<script>

import {
  carPackageList,
  getCarPackageById,
  frequently,
} from '@/api/after-sale/client/package'
import BaseLayout from '@/views/layout/Base'
import DataTable from '@/components/DataTable'
import { getDict, getStoreId } from '@/utils'
import { get } from 'js-cookie'
export default {
  components: {
    'base-layout': BaseLayout,
    DataTable,
  },
  props: {
    storageId: {
      type: Number,
    },
    status: {
      type: String,
      default: '',
    },
    commonPackages:{
      type:Array,
    }
  },
  data () {
    return {
      form: {
        carPackageName: '',
        carPackageDistId: '',
        storeId: '',
      },
      dict: [], //字典
      packList: [],//套餐列表
      partsList: {},//套餐配件对象
      dataList: {},//暂存根据id获得详情数据
      tableColumnAttributes: [
        {
          name: '项目名',
          value: 'projectName',
          type: 'text',
        },
        {
          name: '项目介绍',
          value: 'remark',
          type: 'text',
        },
        {
          name: '项目工时',
          value: 'workHours',
          type: 'render',
          render: (row, value) => {
            return `${value}小时`
          },
        },
        {
          name: '项目类型',
          value: 'projectDictValue',
          type: 'text',
        },
        {
          name: '工时费',
          value: 'amount',
          type: 'render',
          render: (row, value) => {
            return `￥${value}`
          },
        },
        // commission 项目提成点
      ],
    }
  },
  watch: {
    checkboxGroup: function (value) {
      if (value) {
        this.addTable(value)
      }
    },
  },
  computed: {
    tableData () {
      let data = [];
      Object.keys(this.dataList).forEach(item => {
        data = data.concat(this.dataList[item])
      })
      return data;
    }
  },
  methods: {
    // 删除
    deleteById (row) {
      Object.keys(this.dataList).forEach(item => {
        if (row.fatherId == item) {
          this.dataList[item].forEach((item2, index) => {
            if (item2.id == row.id) {
              this.dataList[item].splice(index, 1)
            }
          })
          //?检查套餐是否没有项目了，是则取消选中
          if (this.dataList[item].length == 0) {
            this.packCheck(Number(item.replace('id', '')))
          }
        }
      })
    },
    //获取配件集合
    getPartsList () {
      let arry = []
      this.packList.forEach(item => {
        if (item.isActive) {
          arry=arry.concat(this.partsList[`parts${item.id}`])
        }
      })
      return arry;
    },
    // 选择套餐
    async select () {
      if (this.status == 'setting') {
        let ids = [];
        this.packList.forEach(item => {
          if (item.isActive) {
            ids.push(item.id)
          }
        })
        let { success } = await frequently(ids.join(','));
      }
      this.$emit('getList', this.tableData, this.getPartsList())
    },
    //套餐选择
    packCheck (id) {
      let t = false;//区分是选中，还是非选中
      this.packList.forEach(item => {
        if (item.id === id) {
          if (item.isActive) {
            this.$set(item, 'isActive', false)
          } else {
            t = true;
            this.$set(item, 'isActive', true)
          }
        }
      })
      t ? this._getCarPackageById(id) : this.removeDatalist(id);
    },
    removeDatalist (id) {
      let name = `id${id}`;
      this.$set(this.dataList, name, []);
    },
    setDataList (id, list) {
      let name = `id${id}`;
      list.forEach(item => item.fatherId = name)
      this.$set(this.dataList, name, list);
    },
    //查询套餐详情
    _getCarPackageById (id) {
      getCarPackageById(id).then(res => {
        let { success, data: { carProjectList, carPartsList } } = res;//选择详情中项目,配件
        if (success && Array.isArray(carProjectList)) {
          this.setDataList(id, carProjectList ? carProjectList : []);
          this.partsList[`parts${id}`] = carPartsList;//保存配件
        }
      })
    },
    //套餐分页查询
    _carPackageList () {
      this.dataList = {};
      carPackageList(this.form, 200, 1).then(res => {
        let { success, data } = res;
        if (success) {
          this.packList = data.content;
          if (this.status == 'setting') {
            if(this.commonPackages.length>0){
              this.commonPackages.map(item=>{
                this.packList.map(item2=>{
                  if(item.id==item2.id){
                    this.$set(item2,'isActive',true)
                  }
                })
              })
            }
          }
          
        }
      })
    }
  },
  created () {
    this.dict = getDict(['汽车项目类型', "套餐所属类别"], this.storageId)
    this._carPackageList();
  },
}
</script>

<style lang="scss" scoped>
.show-content-panle {
  // border: 1px solid red;
  width: 100%;
  height: 250px;
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    li {
      width: 200px;
      margin: 10px;
      border: 1px solid #dcdfe6;
      padding: 10px;
      border-radius: 5px;
      cursor: pointer;
      .title {
        font-size: 30px;
        line-height: 30px;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        span {
          display: inline-block;
          width: 80%;
          font-size: 18px;
        }
      }
      .mont {
        text-align: right;
        color: #f40;
      }
    }
  }
  ul::-webkit-scrollbar {
    display: none;
  }
}
//激活的颜色
.activeColor {
  border: 1px solid #1afa29 !important;
}
.seachpanle {
  display: flex;
  border-bottom: 2px solid #dcdfe6;
  padding-bottom: 5px;
  .title {
    flex: 1;
  }
  .lineHeight {
    line-height: 36px;
  }
}
</style>
